import React, { Component } from 'react';
import {NewOrderUrl} from '../../common/url';
import {browserHistory} from 'react-router';

export default class NewOrder extends Component {

  constructor(props){
    super(props);
    this.state = {
      carType:"",
      carFrameNo:"",
      stylePre: {display:"block"},
      styleAft: {display:"none",textAlign: "center"}
    };
    this.handleChange = this.handleChange.bind(this);
    this.submitHandler = this.submitHandler.bind(this);
    this.styleToggle = this.styleToggle.bind(this);
    this.toAllOrder = this.toAllOrder.bind(this);
  }

  styleToggle(){
    this.setState({
      stylePre: {display:"none"},
      styleAft: {display:"block",textAlign: "center"}
    });
  }


  submitHandler(event){
    event.preventDefault();
    const orderId = new Date().getTime();
    fetch(NewOrderUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "Authorization": "Bearer "+sessionStorage.token
      },
      body: "orderId="+orderId+"&carType="+this.state.carType+"&carFrameNo="+this.state.carFrameNo
    }).then(response => response.json())
      .then(function(data) {
        if(data.code == 0){
          if(this.state.stylePre.display == "block"){
            this.setState({
              stylePre: {display:"none"},
              styleAft: {display:"block",textAlign: "center"}
            });
          }else{
            this.setState({
              stylePre: {display:"block"},
              styleAft: {display:"none",textAlign: "center"}
            });
          }
        }else{
          this.refs.errmsg2.innerHtml = "网络错误，请重新登录"
        }
      }.bind(this)).catch(
        e => console.error(e)
    )
  }

  handleChange(event) {
    const name = event.target.name;
    this.setState({[name]: event.target.value});
  }

  toAllOrder(){
    browserHistory.push('/allorder');
  }

  render() {
    return (
        <div className="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">			
          <div className="row">
            <ol className="breadcrumb">
              <li><a href="#"><span className="glyphicon glyphicon-home"></span></a></li>
              <li className="active">新建订单</li>
            </ol>
          </div>
          <div className="row">
            <div className="col-lg-12">
              <div className="panel panel-default">
                <div className="panel-heading">新建订单<button className="pull-right btn btn-primary" style={{marginTop:"6px"}} onClick={()=>{browserHistory.push("/allorder")}}>返回</button></div>
                <div className="panel-body">
                  <form className="form-horizontal" onSubmit={this.submitHandler} style={this.state.stylePre}>
                    <div className="form-group">
                      <label className="col-sm-2 control-label">
                        车型
                      </label>
                      <div className="col-sm-6">
                        <input type="text" name="carType" placeholder="请输入车型" id="carType" className="form-control"  value={this.state.carType} onChange={this.handleChange}/>
                      </div>
                    </div>
                    <div className="form-group">
                      <label className="col-sm-2 control-label">
                        车架号
                        </label>
                      <div className="col-sm-6">
                        <input type="text" name="carFrameNo" placeholder="请输入车架号" id="carFrameNo" className="form-control"  value={this.state.carFrameNo} onChange={this.handleChange}/>
                      </div>
                    </div>
                    <div ref="errmsg2" className="errmsg"></div>
                    <div className="col-sm-12" style={{textAlign: "center"}}>
                      <button type="submit" className="btn btn-primary">
                        创建新的订单
                      </button>
                    </div>
                  </form>
                  <div className="col-sm-12" style={this.state.styleAft} >
                      <h3>订单创建成功！</h3>
                      <button type="submit" className="btn btn-primary" onClick={this.toAllOrder}>
                        确定
                      </button>
                    </div>
                </div>
              </div>
            </div>
          </div>	
        </div>
    )
  }
}